<template>
<label :class="labelClasses">{{ label }}
  <field-error v-show="errors.has(name)" :err="errors.first(name)" />

  <div v-show="isLoading" class="loader-wrapper">
    <div class="loader"></div>
  </div>

  <a v-show="!isLoading" class="clear-btn" @click="clearSelected">
    <et-icon :name="rightIcon" />
  </a>

  <input type="text"
         :class="{'is-invalid-input': errors.has(name)}"
         :data-toggle="id"
         :name="name"
         v-model="displayTxt"
         v-validate:selectedVal="rules"
         @input="inputHandler"
         @blur="blurHandler" />

  <options :id="id" :items="items" :handler="selectHandler" />

</label>
</template>

<script>
import FieldError from '../FieldError';
import { EtIcon } from '../../../widgets';
import Options from './Options';

export default {

  components: {
    FieldError,
    EtIcon,
    Options
  },

  props: {
    label: {
      type: String,
      required: true
    },
    id: {
      type: String,
      required: true
    },
    name: {
      type: String,
      required: true
    },
    items: {
      type: Array
    },
    rules: {
      type: Object,
      default() { return {}; }
    },
    initVal: {
      type: Object
    }
  },

  inject: ['$validator'],

  data() {
    return {
      selectedVal: this.initVal,
      isLoading: null,
      displayTxt: this.initVal ? this.initVal.txt : null
    };
  },

  computed: {
    labelClasses() {
      return {
        'et-dynamic-query-field': true,
        'is-invalid-label': this.errors.has(this.name)
      };
    },

    rightIcon() {
      return this.selectedVal ? 'delete' : 'down-arrow';
    }
  },

  watch: {
    items() {
      this.isLoading = false;
    },
    initVal() {
      this.selectedVal = this.initVal;
      this.displayTxt = this.initVal ? this.initVal.txt : null;
    }
  },

  methods: {

    reset() {
      this.selectedVal = null;
      this.isLoading = null;
      this.displayTxt = null;
      this.$emit('select', {
        key: this.name,
        val: null
      });
    },

    clearSelected() {
      if (this.selectedVal) {
        this.selectedVal = null;
        this.displayTxt = null;
        this.$emit('select', {
          key: this.name,
          val: null
        });
      }
    },

    selectHandler(item) {
      this.selectedVal = item;
      this.displayTxt = item.txt;
      this.$emit('select', {
        key: this.name,
        val: item.val
      });
    },

    inputHandler() {
      this.isLoading = true;
      this.$emit('input', {
        key: this.name,
        val: this.displayTxt
      });
    },

    blurHandler() {
      if (this.selectedVal) {
        this.displayTxt = this.selectedVal.txt;
      } else {
        this.displayTxt = null;
      }
    }
  },

  mounted() {
    new Foundation.Dropdown($(`#${this.id}`), {
      "hover": false,
      "hoverPane": false,
      "closeOnClick": true,
    });

    $(`#${this.id}`).on('show.zf.dropdown', () => {
      this.displayTxt = null;
    });
  }

};
</script>
